<template>
  <mars-dialog title="作业点位" icon="tool" customClass="job-site-list-panel" :draggable="true" :width="280" :height="400"
    :position="{ top: 60, left: 10 }">
    <div class="job-site-container">
      <ul class="job-site-list">
        <li v-for="(site, index) in jobSites" :key="index" class="job-site-item" @click="flyToSite(site)">
          <div class="site-info">
            <div class="site-name">{{ site.name }}</div>
            <div class="site-coords">{{ site.lng }}, {{ site.lat }}</div>
          </div>
          <div class="site-status" :class="site.status">
            <!-- {{ site.statusText }} -->
            查看
          </div>
        </li>
      </ul>
    </div>
  </mars-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue"
import useLifecycle from "@mars/common/uses/use-lifecycle"
import * as mapWork from "./map"

// 启用map.ts生命周期（暂不需要）
useLifecycle(mapWork)

// 示例点位数据（可按需替换为接口/配置文件）
interface JobSite {
  name: string
  lng: number
  lat: number
  status: "completed" | "in-progress" | "pending"
  statusText: string
}

const jobSites = ref<JobSite[]>([
  { name: "作业点位A", lng: 116.397428, lat: 39.90923, status: "completed", statusText: "已完成" },
  { name: "作业点位B", lng: 117.407428, lat: 38.91923, status: "in-progress", statusText: "进行中" },
  { name: "作业点位C", lng: 118.387428, lat: 37.89923, status: "pending", statusText: "待开始" },
  { name: "作业点位D", lng: 119.417428, lat: 36.92923, status: "completed", statusText: "已完成" },
  { name: "作业点位E", lng: 110.377428, lat: 35.88923, status: "pending", statusText: "待开始" },
  { name: "作业点位A", lng: 116.397428, lat: 39.90923, status: "completed", statusText: "已完成" },
  { name: "作业点位B", lng: 116.407428, lat: 39.91923, status: "in-progress", statusText: "进行中" },
  { name: "作业点位C", lng: 116.387428, lat: 39.89923, status: "pending", statusText: "待开始" },
  { name: "作业点位D", lng: 116.417428, lat: 39.92923, status: "completed", statusText: "已完成" },
  { name: "作业点位E", lng: 116.377428, lat: 39.88923, status: "pending", statusText: "待开始" }
])

function flyToSite(site: JobSite) {
  // {
  //   "lat": 39.90923,     // 纬度：目标位置的纬度坐标（北纬39.9度）
  //   "lng": 116.397428,   // 经度：目标位置的经度坐标（东经116.4度）
  //   "alt": 2500,         // 高度：相机距离地面的高度（米）
  //   "heading": 0,        // 航向角：相机朝向，0=北，90=东，180=南，270=西
  //   "pitch": -90         // 俯仰角：相机俯仰角度，-90=垂直向下，0=水平，90=垂直向上
  // }
  // 暂不实现飞行功能，后续接入 map.ts 时放开
  // mapWork.flyToSite(site)
  console.log(site)
  // mapWork.drawExtent()
  mapWork.flytoView(site)
}
</script>

<style lang="less">
.job-site-list-panel {
  .mars-dialog__header {
    background-color: var(--mars-base-bg);
  }

  .mars-dialog__body {
    padding: 0;
  }
}
</style>

<style lang="less" scoped>
.job-site-container {
  height: 100%;
  overflow: hidden;
}

.job-site-list {
  height: 100%;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  list-style: none;
}

.job-site-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mars-base-border-color);
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: var(--mars-base-hover-bg);
  }

  &:last-child {
    border-bottom: none;
  }
}

.site-info {
  flex: 1;
}

.site-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--mars-text-color);
  margin-bottom: 4px;
}

.site-coords {
  font-size: 12px;
  color: var(--mars-text-color-secondary);
}

.site-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;

  &.completed {
    background-color: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
  }

  &.in-progress {
    background-color: #fff7e6;
    color: #fa8c16;
    border: 1px solid #ffd591;
  }

  &.pending {
    background-color: #f0f0f0;
    color: #666666;
    border: 1px solid #d9d9d9;
  }
}
</style>
